<template>
  <view>
    <view class="fixed bg-f8ff w-100 h-100 top0 left0 ov-hd-y">
      <itemTitle :item="details">
        <template slot="item_title">
          <view class="font25 t-0">已售：{{ details.realSales || "0" }}</view>
        </template>
      </itemTitle>
      <view>
        <view class="w-100 px-2-6 py-2">
          <view class="w-100 h1 bg-ccc"></view>
        </view>
        <!-- <view class="px-5 f-b-c mb-4 mt-2">
					<view class="font25 t-8">
						选择 <text class="t-20 ml-4">规格/颜色</text>
					</view>
					<view>
						<image src="../../static/icon_right_0.png" class="w24 h24" />
					</view>
				</view> -->
        <!-- <view class="px-5 f-b-c mb-2 mt-2" @click="open_change('popup_address')">
					<view class="font25 t-8" v-if="address.province">
						送至 <text class="t-20 ml-4">{{address.province ||'--'}}{{address.city ||''}}{{address.county ||''}}{{address.address ||''}}</text>
					</view>
					<view class="font25 t-8" v-else>
						请选择地址
					</view>
					<view>
						<image src="../../static/icon_right_0.png" class="w24 h24" />
					</view>
				</view> -->
        <!-- 	<view class="px-5 f-b-c mb-4" @click="open_change('popup_activity')">
					<view class="font25 t-8">
						活动 <text class="t-20 ml-4 px-3 py-1 circle12 border">满500减50</text>
					</view>
					<view>
						<image src="../../static/icon_right_0.png" class="w24 h24" />
					</view>
				</view> -->
        <!-- <view class="w-100 px-2-6 py-2">
					<view class="w-100 h1 bg-ccc"></view>
				</view> -->

        <view class="w-100 px-5">
          <view class="font28 font500 t-20 pb-2">商品详情</view>
          <view
            v-if="details.stock"
            style="color: #8a8a8a; font-size: 22rpx; margin-bottom: 20rpx"
            >剩余库存：{{ details.remainStockNum }}</view
          >
          <richText :key="details.id" :rich_text="details.content"></richText>
        </view>
      </view>
      <view class="w-100 h180"></view>
    </view>

    <!-- 底部 -->
    <view class="w-100 fixed bottom0 pb-5 left0 option z-999">
      <view class="w-100 px-4">
        <view class="w-100 f-b-c bg-theme_3 h100 circle50">
          <view class="pl-1 font28 font700 t-w f-y-c">
            <view class="w84 h84 p-1 rounded-circle ml-2 re" @click="car_info">
              <image src="../../static/shop_car.png" class="w64 h64" />
              <view
                class="ab top0 ty-car bg-er font24 font700 f-c-c h38 rounded-circle px-1"
                >{{ shop_number }}</view
              >
            </view>
          </view>
          <view v-if="isLogin">
            <view
              class="w220 h100 f-c-c bg-theme circle120 font28 font700 t-20"
              v-if="show_shop_car"
              @click="get_purchass"
              >去支付</view
            >
            <view class="w480 f-b-c" v-else>
              <view class="w240 h100 bg-theme bg-1">
                <view
                  class="h100 f-c-c bg-theme_4 font28 font700 t-20 bg-2"
                  @click="set_add(details)"
                  >加入购物车</view
                >
              </view>
              <view class="w240 h100 bg-theme_4 bg-3">
                <view
                  class="h100 f-c-c bg-theme font28 font700 t-20 bg-4"
                  @click="get_purchass(details)"
                  >立即购买</view
                >
              </view>
            </view>
          </view>
          <view
            v-else
            class="w220 h100 f-c-c bg-theme circle120 font28 font700 t-20"
            @click="set_go_login"
            >去登录</view
          >
        </view>
      </view>
    </view>

    <!-- 购物车 -->
    <uni-popup ref="shop_car" type="bottom" class="z-99" @change="set_show_car">
      <view class="w-100 h824 rounded-top-left-54 ov-hd">
        <view class="w-100 h160 bg-f8ff">
          <view
            class="w-100 h-100 bg-theme f-b-c rounded-bottom-54 t-0 font25 font500 px-2-6"
          >
            <view class="ml-2">已选商品</view>
            <view class="w200 h64 f-c-c circle20 bg-f8ff" @click="clear_car"
              >清空购物车</view
            >
          </view>
        </view>
        <view class="w-100 h664 bg-theme">
          <view class="w-100 h-100 bg-f8ff rounded-right-54 re">
            <scroll-view
              class="scroll-view_H_car uni-scroll"
              scroll-y="true"
              scroll-with-animation
            >
              <view
                class="px-5 f-b-c h156 py-2 border-bottom"
                v-for="(item, index) in shop_car"
                :key="item.id"
              >
                <view class="f-y-s">
                  <ImageFile
                    :url="item.thumbnail"
                    className="w116 h116 circle12"
                  />
                  <view class="pl-2 h116 fs-b-b w380 font600 t-20">
                    <view class="w-100 font32">{{ item.name }}</view>
                    <view class="w-100 font28"
                      ><text class="font20 font400">¥</text
                      >{{ item.price }}</view
                    >
                  </view>
                </view>
                <view class="f-b-c">
                  <view
                    class="w64 h64 f-c-c"
                    @click="set_reduce(item, index)"
                    v-if="item.number"
                  >
                    <view
                      class="w40 h40 font40 font600 rounded-circle f-c-c pb-1"
                      :class="item.number <= 0 ? 't-3' : 't-20 bg-theme'"
                      >-</view
                    >
                  </view>
                  <view
                    class="px-2 h64 font28 font500 t-20 f-c-c"
                    v-if="item.number > 0"
                    >{{ item.number }}</view
                  >
                  <view class="w64 h64 f-c-c" @click="set_add(item, index)">
                    <view
                      class="w40 h40 font40 font600 rounded-circle t-20 f-c-c pb-1 bg-theme"
                      >+</view
                    >
                  </view>
                </view>
              </view>
              <view v-if="shop_number <= 0" class="w-100 py-6 font28 t-20 t-a"
                >暂无数据</view
              >
            </scroll-view>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        class="bg-theme"
        cancelText="取消"
        confirmText="确定"
        title="通知"
        content="确定要清空购物车吗？"
        @confirm="dialogConfirm"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup>

    <!-- 选择收货地址 开始 -->
    <uni-popup type="bottom" ref="popup_address" class="z-9999 re">
      <PopupHeader
        title="选择收货地址"
        @set_close="set_close"
        type="popup_address"
      >
        <template slot="popup_content">
          <view class="w-100 h16"></view>
          <view class="w-100 h408 re">
            <scroll-view
              class="scroll-view_H uni-scroll"
              scroll-y="true"
              scroll-with-animation
            >
              <view
                class="px-5 f-b-c py-3 border-bottom"
                v-for="(item, index) in address_list"
                :key="item.id"
                @click="change_address(item)"
              >
                <view class="fs-y-s pr-8">
                  <view class="f-b-c w-100 h50 pb-2">
                    <view
                      class="font32 font600"
                      :class="address.id == item.id ? 't-20' : 't-8'"
                      >{{ item.name }}</view
                    >
                    <view
                      class="font32 font600"
                      :class="address.id == item.id ? 't-20' : 't-8'"
                      >{{ item.mobile }}</view
                    >
                  </view>
                  <view
                    class="font25"
                    :class="address.id == item.id ? 't-20' : 't-8'"
                  >
                    {{ item.province }}
                    {{ item.city }}
                    {{ item.county }}
                    {{ item.address }}
                  </view>
                </view>
                <view>
                  <image
                    src="../../static/icon_select_cur.png"
                    v-if="address.id == item.id"
                    class="w40 h40"
                  />
                  <image
                    src="../../static/icon_select.png"
                    v-else
                    class="w40 h40"
                  />
                </view>
              </view>
              <view
                v-if="address_list.length == 0"
                class="w-100 py-6 font28 t-20 t-a"
                >暂无数据</view
              >
            </scroll-view>
          </view>
          <view class="w-100 h214 px-2-6 f-c-c">
            <view
              class="w-100 h100 f-c-c circle50 bg-theme font28 t-20 font700"
              @click="set_address"
              >添加收货地址</view
            >
          </view>
        </template>
      </PopupHeader>
    </uni-popup>
    <!-- 选择收货地址 END -->

    <!--  优惠券领取 开始-->
    <uni-popup type="bottom" ref="popup_activity" class="z-9999 re">
      <PopupHeader
        title="优惠券领取"
        @set_close="set_close"
        type="popup_activity"
      >
        <template slot="popup_content">
          <view class="w-100 h16"></view>
          <view class="w-100 h608 re">
            <scroll-view
              class="scroll-view_H uni-scroll"
              scroll-y="true"
              scroll-with-animation
            >
              <view class="w-100 px-2-6">
                <view
                  class="w-100 h222 f-b-c circle34 show0 mt-3 bg-f8ff re"
                  v-for="(item, index) in coupon_list"
                  :key="index"
                >
                  <view class="w226 h222 ty-circle-img f-c-c bg-theme_5">
                    <view class="f-c-b h80"
                      ><text class="font88 font700 f-c-c h70 mr-05">{{
                        5 * (index + 1)
                      }}</text
                      >元</view
                    >
                  </view>
                  <view
                    class="w470 bg-white h222 fs-b-b pl-4 pr-2 py-3 ty-circle-box"
                  >
                    <view class="font32 t-20 font600 h32"
                      >满{{ 100 * (index + 1) }}可用</view
                    >
                    <view class="w-100">
                      <view class="font24 t-8">有效期</view>
                      <view class="font24 t-8">2022-09-09—2022-10-10</view>
                    </view>
                  </view>
                  <view class="ab left206 top0 bottom0">
                    <view
                      class="w12 h12 show0-in ab left14 top28 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top50 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top72 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top94 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top116 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top138 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top160 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="w12 h12 show0-in ab left14 top182 bg-f8ff rounded-circle"
                    ></view>
                    <view
                      class="ab left0 w40 h40 bg-f8ff show-in-bottom"
                      style="top: -20rpx"
                    ></view>
                    <view
                      class="ab left0 w40 h40 bg-f8ff show-in-top"
                      style="bottom: -20rpx"
                    ></view>
                  </view>
                </view>
              </view>
              <view
                v-if="address_list.length == 0"
                class="w-100 py-6 font28 t-20 t-a"
                >暂无数据</view
              >
            </scroll-view>
          </view>
          <view class="w-100 h214 px-2-6 f-c-c">
            <view class="w-100 h100 f-c-c circle50 bg-theme font28 t-20 font700"
              >一键领取</view
            >
          </view>
        </template>
      </PopupHeader>
    </uni-popup>
    <!-- 优惠券领取 结束 -->
    <SignUp ref="signUp" />
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import itemTitle from "../ticket/components/title.vue";
import richText from "../ticket/components/rich-text.vue";
import PopupHeader from "./components/popup-header.vue";
import ShopCar from "./components/shop-car.vue";
import ImageFile from "../../components/img_file.vue";

import { address_list, mall_details } from "../../api/mall.js";
import isLoginMxin from "../../common/isLogin.js";
export default {
  components: {
    itemTitle,
    richText,
    PopupHeader,
    ShopCar,
    ImageFile,
  },
  mixins: [isLoginMxin],
  data() {
    return {
      details: {},
      show_shop_car: false,
      address_list: [],
      address: {},
      coupon_list: [],
    };
  },
  computed: {
    ...mapState("shop", ["shop_car", "shop_number"]),
  },
  onShow() {
    this.get_address_list();
  },
  created() {
    let details = uni.getStorageSync("shop_details");
    this.get_mall_details(details.id);
  },
  mounted() {},

  methods: {
    ...mapActions("shop", [
      "set_change_shop_shop_car",
      "set_clear_shop_shop_car",
    ]),
    async get_mall_details(id) {
      const { code, body, message } = await mall_details({ id });
      if (code === "0") {
        this.details = body;
      } else {
        uni.showToast({
          title: message,
          icon: "error",
        });
      }
    },
    set_reduce(obj) {
      let data = {
        id: obj.id,
      };
      // 新增才有 obj 参数 购物车中数量少于1 做删除
      data.type = obj.number <= 1 ? "delete" : "reduce";

      this.set_change_shop_shop_car(data);
    },
    set_add(obj) {
      console.log(obj);
      let number = JSON.parse(JSON.stringify(obj.number || 0));
      if (this.shop_car && this.shop_car.length) {
        this.shop_car.forEach((v) => {
          if (v.id === obj.id) {
            number = v.number;
          }
        });
      }
      if (!this.$validateStock(obj, number + 1)) {
        return uni.showToast({
          title: "库存不足，请重新选择",
          icon: "none",
        });
      }
      let data = {
        obj,
        id: obj.id,
        number: 1,
        type: "plus",
      };
      this.set_change_shop_shop_car(data);
    },
    // 清空购物车
    clear_car() {
      this.$refs.alertDialog.open();
    },
    dialogConfirm() {
      this.set_clear_shop_shop_car();
    },
    dialogClose() {
      this.$refs.alertDialog.close();
    },
    // 购买
    get_purchass(val) {
      if (val.id) {
        this.set_add(val);
      }
      uni.navigateTo({
        url: `/pages/shop/purchass?address_id=${this.address?.id}`,
      });
    },
    // 添加地址
    set_address() {
      uni.navigateTo({
        url: "/pages/shop/address",
      });
      this.$refs["popup_address"].close();
    },
    // 选择地址
    change_address(val) {
      this.address = val;
      this.set_close("popup_address");
    },
    // 开启弹窗
    open_change(val) {
      this.$refs[val].open();
      if (val === "popup_address") {
        this.get_address_list();
      }
    },
    // 关闭弹出
    set_close(val) {
      this.$refs[val].close();
    },
    car_info() {
      this.show_shop_car = !this.show_shop_car;
      if (this.show_shop_car) {
        return this.$refs.shop_car.open();
      }
      this.$refs.shop_car.close();
    },
    set_show_car(val) {
      this.show_shop_car = val.show;
    },
    // 收货地址
    async get_address_list() {
      let query = {
        currentPage: 1,
        pageSize: 30,
      };
      const { body } = await address_list(query);
      this.address_list = body?.records || [];
      let address = body?.records?.find((item) => item.def) || {};
      if (!this.address?.id) {
        this.address = address;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.show0-top {
  border-radius: 48rpx 48rpx 0 0;
}
.border {
  border: 1rpx solid #00cd32;
}
.ty-car {
  right: -14rpx;
}
.bg-1 {
  border-radius: 50rpx 0 0 50rpx;
}
.bg-2 {
  border-radius: 50rpx 0 16rpx 50rpx;
}
.bg-3 {
  border-radius: 0 50rpx 50rpx 0;
}
.bg-4 {
  border-radius: 16rpx 50rpx 50rpx 0;
}
.scroll-view_H {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
}
.ty-circle-box {
  border-radius: 0 34rpx 34rpx 0;
}
.show-in-top {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  transform: rotate(90deg);
  border-radius: 50% 0 0 50%;
}
.show-in-bottom {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  transform: rotate(-90deg);
  border-radius: 50% 0 0 50%;
}
.ty-car {
  right: -24rpx;
}
.scroll-view_H_car {
  position: absolute;
  top: 20rpx;
  left: 0;
  bottom: 170rpx;
  right: 0;
  z-index: 9;
}
.rounded-top-left-54 {
  border-radius: 54rpx 54rpx 0 0;
}
.h824 {
  height: 824rpx;
}
</style>
